<script setup>
import { ref } from 'vue'
const props = defineProps({
  loadingtext: {
    type: String,
    default: '',
  },
  loading: {
    type: Boolean,
    default:''
  },
  text:{
    type:String,
    default:''
  }
})
const emits = defineEmits([
  'click',

])
  //切换
  function change () {
    emits('click',
      props.loading=!props.loading
    )
  }
</script>

<template>
  <div>
    <button
     @click="change"
    >
    <span
      class="loading"
      v-show="props.loading"
    >
      ※
    </span>
     {{ props.loading ?  `${props.loadingtext}`: props.text }}
  </button>
  </div>
</template>

<style scope>
  .loading{
    display: inline-block;
    animation: loading 1s linear infinite;
  }
  @keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
